<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <t-card shadow="never" style="width: 1320px">
        <el-form :model="empQO" ref="empQO">
          <el-row>
            <el-col :span="4" :offset="0">
              <el-form-item label="账号" prop="empAccount" label-width="140px">
                <el-input v-model="empQO.empAccount" filterable clearable placeholder="员工账号"
                          style="width:140px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="2">
              <el-form-item label="角色" prop="roleId" label-width="120px">
                <el-select v-model="empQO.roleId" filterable clearable placeholder="请选择角色"
                           style="width: 120px;">
                  <el-option v-for="r in AllRoles" :key="r.roleId" :label="r.roleName" :value="r.roleId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-form-item label="状态" prop="empStatus" label-width="120px">
                <el-select v-model="empQO.empStatus" filterable clearable placeholder="请选择状态"
                           style="width: 120px;">
                  <el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="2">
              <el-row>
                <t-button theme="primary" size="large" variant="dashed" @click="select(1)">查询</t-button>&nbsp;&nbsp;&nbsp;&nbsp;
                <t-button theme="primary" size="large" variant="outline"
                          @click="resetForm('empQO')">重置
                </t-button>&nbsp;&nbsp;&nbsp;&nbsp;
                <t-button theme="primary" size="large" @click="dialogAdd=true">添加</t-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </t-card>
      <br/>
      <t-card shadow="never" style="width: 1320px">
        <el-table :data="currentEmps" border style="height:425px;">
          <el-table-column type="index" align="center"></el-table-column>
          <el-table-column prop="empAccount" label="员工账号" align="center"></el-table-column>
          <el-table-column prop="empPassword" label="员工密码" align="center"></el-table-column>
          <el-table-column prop="roleId" label="员工角色" align="center">
            <template slot-scope="scope">
              <template v-for="r in AllRoles">
                <span v-if="scope.row.roleId == r.roleId" :key="r.roleId">{{ r.roleName }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="empStatus" label="员工状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.empStatus == 0">停用</span>
              <span v-if="scope.row.empStatus == 1">启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-row>
                <t-button theme="primary" @click="edit(scope)">编辑</t-button>
                &ensp;
                <t-button theme="primary" @click="del(scope)">删除</t-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
                       :page-count="totalPage" @current-change="goPage">
        </el-pagination>
        <el-dialog title="添加员工信息" :visible.sync="dialogAdd">
          <el-form :model="addEmp" ref="addEmp">
            <el-row>
              <el-col :span="10" :offset="0">
                <el-form-item label="账号" prop="empAccount" label-width="80px">
                  <el-input v-model="addEmp.empAccount" filterable clearable placeholder="请输入账号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="角色" prop="roleId" label-width="80px">
                  <el-select v-model="addEmp.roleId" placeholder="请选择角色">
                    <el-option v-for="r in AllRoles" :key="r.roleId" :label="r.roleName" :value="r.roleId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="0">
                <el-form-item label="密码" prop="empPassword" label-width="80px">
                  <el-input v-model="addEmp.empPassword" filterable clearable placeholder="请输入密码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="状态" prop="empStatus" label-width="80px">
                  <el-select v-model="addEmp.empStatus" disabled placeholder="启用">
                    <!-- <el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
                    </el-option> -->
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <t-button theme="primary" variant="outline" @click="dialogAdd=false;resetForm('addEmp')">取 消</t-button>
            &ensp;
            <t-button theme="primary" @click="add">确 定</t-button>
          </div>
        </el-dialog>

        <el-dialog title="更新员工信息" :visible.sync="dialogUpdate">
          <el-form :model="updateEmp" ref="updateEmp">
            <el-row>
              <el-col :span="10" :offset="0">
                <el-form-item label="账号" prop="empAccount" label-width="80px">
                  <el-input v-model="updateEmp.empAccount" filterable clearable
                            placeholder="请输入账号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="角色" prop="roleId" label-width="80px">
                  <el-select v-model="updateEmp.roleId" placeholder="请选择角色">
                    <el-option v-for="r in AllRoles" :key="r.roleId" :label="r.roleName" :value="r.roleId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="0">
                <el-form-item label="密码" prop="empPassword" label-width="80px">
                  <el-input v-model="updateEmp.empPassword" filterable clearable
                            placeholder="请输入密码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="状态" prop="empStatus" label-width="80px">
                  <el-select v-model="updateEmp.empStatus" placeholder="请选择状态">
                    <el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <t-button theme="primary" variant="outline" @click="dialogUpdate=false">取 消</t-button>
            &ensp;
            <t-button theme="primary" @click="update">确 定</t-button>
          </div>
        </el-dialog>
      </t-card>
    </t-card>
  </div>
</template>

<script>
import axios from "axios"
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "employees",
  data() {
    return {
      empQO: {},
      AllRoles: [
        {
          roleId: 1,
          roleName: '超级管理员'

        },
        {
          roleId: 2,
          roleName: '管理员'
        },
        {
          roleId: 3,
          roleName: '普通职员'
        }
      ],
      allEmps: [],
      currentEmps: [],

      dialogAdd: false,
      dialogUpdate: false,
      addEmp: {},
      updateEmp: {},
      status: [{
        value: '0',
        label: '停用'
      }, {
        value: '1',
        label: '启用'
      }],
      totalPage: 0,
      currentPage: 0,
    }
  },
  methods: {
    del(scope) {
      this.$confirm('此操作将永久删除员工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get("/api/admin/emp/del", {
          params: {
            id: scope.row.empId
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.currentEmps.splice(scope.$index, 1);
            this.allEmps.splice(scope.$index, 1);
            this.getAll();
            MessagePlugin.success('删除成功!')
          } else {
            MessagePlugin.error('员工已启用，不能删除!')
          }
        })
      }).catch(() => {
        MessagePlugin.info('已取消')
      });
    },
    edit(scope) {
      this.dialogUpdate = true;
      //数据回显
      this.updateEmp = {
        ...scope.row
      }
    },
    update() {
      if (this.updateEmp.empId) {
        axios.post("/api/admin/emp/update", this.updateEmp)
            .then(res => {
              if (res.data.code == 200) {
                this.dialogUpdate = false;
                this.goPage(this.currentPage);
                this.getAll();
                MessagePlugin.success('更新成功!')
              }
            })
      }
    },
    add() {
      axios.post("/api/admin/emp/add", this.addEmp)
          .then(res => {
            if (res.data.code == 200) {
              this.dialogAdd = false;
              this.goPage(this.currentPage);
              this.getAll();
              MessagePlugin.success('添加成功!')
            }
            this.resetForm('addEmp');
          });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    select(p) {
      axios.get("/api/admin/emp/list/" + p, {
        params: this.empQO
      }).then(res => {
        if (res.data.code == 200) {
          this.currentEmps = res.data.data.list;
          this.totalPage = res.data.data.pages;
          this.currentPage = 1;
          MessagePlugin.success('查询完成!')
        }
      })
    },
    goPage(p) {
      axios.get("/api/admin/emp/list/" + p, {
        params: this.empQO
      }).then(res => {
        if (res.data.code == 200) {
          this.currentEmps = res.data.data.list;
          this.totalPage = res.data.data.pages;
        }
      })
    },
    getAll() {
      axios.get("/api/admin/emp/getAll").then(res => {
        if (res.data.code == 200) {
          this.allEmps = res.data.data;
        }
      })
    },
  },
  mounted() {
    // axios.get("/api/admin/role/getAllRoles").then(res => {
    //   if (res.data.code == 200) {
    //     this.AllRoles = res.data.data;
    //   }
    // });
    this.getAll();
    this.goPage(1);
  }
}
</script>

<style>

</style>